<template>
  <div>
    <div class="app">
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <router-view></router-view>

      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" to="/home"></van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/friends"></van-tabbar-item>
        <van-tabbar-item icon="cart-o" to="/cart"></van-tabbar-item>
        <van-tabbar-item icon="search" to="/search"></van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: 'Home',
      active: 0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  watch: {
    '$router.meta'(meta) {
      this.title = meta.title
    }
  }
};
</script>
<style lang="less" scoped>
.app {
  font-size: 19px;
  color: green;
}
</style>
